<template>
  <div class="timetable-warp">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="margin-top: 12px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="课程号: " prop="course_id">
            <el-input v-model.number="form.course_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item> -->
          <el-button
            type="primary"
            style="margin-left: 14px;"
            @click="getCourseDetail"
            >搜索</el-button
          >
          <el-button style="margin-left: 14px;" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        prop="course_id"
        align="center"
        label="课程号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="course_name"
        align="center"
        label="课程名"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="course_credit" align="center" label="学分">
      </el-table-column>
      <el-table-column prop="spare_time" align="center" label="课余量">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="select(scope.row)"
            type="text"
            size="small"
            v-if="!scope.row.isElective"
            >选课</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: #7f7f7f"
            v-if="scope.row.isElective"
            >已选</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { courseUserList } from '@/api/course'
import { electiveAdd } from '@/api/elective'
export default {
  name: 'timetable',
  data() {
    return {
      form: {},
      tableData: []
    }
  },

  methods: {
    // 1. 获取课程列表
    getCourseList() {
      courseUserList({ ...this.form }).then(res => {
        if (res.result) {
          this.tableData = res.data;
          this.copyData = res.data;
        }
      })
    },

    // 2. 重置
    reset() {
      this.form = {}
      this.getCourseList()
    },

    // 3. 打开更新弹窗
    select(record) {
      electiveAdd({ course_id: record.course_id }).then(res => {
        if (res.result) {
          this.$message.success(res.message)
          this.getCourseList()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 4. 查询
    getCourseDetail() {
      this.tableData = this.copyData.filter(
        i => i.course_id == this.form.course_id
      )
    }
  },

  mounted() {
    this.getCourseList()
  }
}
</script>

<style lang="scss" scoped></style>
